import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import config from "src/config";

const WordChart = ({ title = "数据展示", name = "", rotationStep= 45, data=[] }) => {
  // 改变主题
  const [theme, changeTheme] = useState("walden");
  const handleChangeTheme = () => {
    const themes = config.themes;
    const index = themes.indexOf(theme);
    if (index >= themes.length - 1) {
      changeTheme(themes[0]);
    } else {
      changeTheme(themes[index + 1]);
    }
  };

  const getOption = data => {
    return {
      tooltip: {
        trigger: "item"
      },
      toolbox: {
        feature: {
          saveAsImage: {
            show: true,
            name: title,
            pixelRatio: 2
          },
          dataView: {}
        }
      },
      series: [
        {
          name: name,
          type: "wordCloud",
          shape: "circle",
          left: "center",
          top: "center",
          width: "95%",
          height: "90%",
          right: null,
          bottom: null,
          sizeRange: [15, 60],
          rotationRange: [-90, 90],
          rotationStep: rotationStep,
          gridSize: 8,
          textStyle: {
            normal: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              // Color can be a callback function or a color string
              color: function() {
                // Random color
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255)
                  ].join(",") +
                  ")"
                );
              }
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: "#bdbdbd",
            }
          },
          data: data
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title} handleClick={handleChangeTheme} text="随机生成">
      <ReactEcharts style={{backgroundColor: "#fffde7"}} lazyUpdate={true} theme={theme} option={getOption(data)} />
    </ChartsWrap>
  );
};

export default WordChart;
